<template>
	<view>
		<view class="gui-margin-top-large gui-padding gui-bg-white">
			<text class="gui-h4 gui-bold gui-color-gray">个人中心</text>
		</view>
		<view class="gui-list gui-padding gui-bg-white">
			<view class="gui-list-items">
				<view class="gui-list-image ucenter-face gui-relative">
					<image class="gui-list-image ucenter-face-image"
						src="https://images.unsplash.com/photo-1662695094714-966fc339a2e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
						mode="aspectFill"></image>
					<!-- <image class="gui-list-image ucenter-face-image" :src="avatar" @click="handleUpImg"
						mode="aspectFill"></image> -->
				</view>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color"
							style="font-size: 35rpx;">{{item.username}}</text>
					</view>
					<text class="gui-list-body-desc gui-color-gray gui-block">{{item.nickname}}</text>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray" @tap="touserinfo">&#xe601;</text>
			</view>
		</view>
		<view class="gui-list gui-margin-top gui-padding-x gui-bg-white">
			<view @click="touserinfo">
				<cardBody :icon="'&#xe613;'" :title="'账户设置'" :valueShow="'0'" :arrowShow="'1'" :iconClass="'gui-color-red'"></cardBody>
			</view>
			<view @click="topasswordupdate">
				<cardBody :icon="'&#xe641;'" :title="'密码修改'" :valueShow="'0'" :arrowShow="'1'" :iconClass="'gui-color-yellow'"></cardBody>
			</view>
		</view>
		<view class="ucenter-line gui-dark-bg-level-3"></view>
		<view class="gui-padding-x gui-bg-white" @click="toabout">
			<cardBody :icon="'&#xe646;'" :title="'关于平台'" :valueShow="'0'" :arrowShow="'1'" :iconClass="'gui-color-orange'"></cardBody>
		</view>
		<view class="ucenter-line gui-dark-bg-level-3"></view>
		<view hover-class="gui-tap" class="gui-flex gui-justify-content-center">
			<text class="gui-text-center gui-icons logoff gui-color-gray" @tap="open1">&#xe62e; 退出登录</text>
		</view>
	
		<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal1">
			<template v-slot:content>
				<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
					<text class="gui-block gui-text-center gui-text gui-color-gray"
						style="line-height:100rpx; padding:10rpx;">是否退出账号</text>
				</view>
			</template>
	
			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<template v-slot:btns>
				<view class="gui-flex gui-row gui-space-between">
					<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
						<text class="modal-btns gui-color-black" @tap="close1">取消</text>
					</view>
					<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
						<text class="modal-btns gui-color-black" @tap="confirm1">确认</text>
					</view>
				</view>
			</template>
		</gui-modal>
	</view>
</template>

<script setup>
	import { ref,createApp,getCurrentInstance } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import cardBody from "@/lib/components/card-body.vue"
	import guiBoxBanner from "@/Grace6/components/gui-box-banner.vue"
	import guiModal from "@/Grace6/components/gui-modal.vue"
	import ybgolbal from "@/lib/js/ybgolbal.js"
	const app = createApp();
	const currentInstance = getCurrentInstance();
	const ybapi = ybgolbal.getybapi(currentInstance);
	let item = ref({})
	let avatar = ref("https://images.unsplash.com/photo-1662695094714-966fc339a2e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80")
	onShow(()=>{
		console.log("进入我的页面");
		getData();
	})
	function handleUpImg() { // 点击图片区域，选择图片并上传
		uni.chooseImage({ // 选择图片
			count: 1,
			success: (res) => { // 图片选择成功的回调（必传），会返回一个对象
				avatar.value = res.tempFilePaths[0] // 用于更新视图
				uni.uploadFile({
					url: "/hospital/user/updateAvatar", // 请求地址
					filePath: res.tempFilePaths[0], // 临时文件路径
					name: "avatarfile", // 文件对应的key值
					header: {
						type: "client" // 需要带的请求头，token等等
					},
					formData: { // 额外的请求数据
						uesrName: userName.value
					},
					success: (res) => { // 成功后的回调
						console.log("修改成功");
					}
				})
			}
		})
	}
	function open1(){
		console.log(currentInstance.refs['guimodal1'])
		currentInstance.refs['guimodal1'].open();
	}
	function close1(){
		currentInstance.refs['guimodal1'].close();
	}
	function confirm1(){
		currentInstance.refs['guimodal1'].close();
		uni.removeStorageSync('ttyhtoken');
		uni.reLaunch({
			url: "/pages/login/login"
		})
	}
	function getData(){
		ybapi.User_Getmyinfo(function(data) {
			console.log(data);
			item.value = data;
		})
	}
	function touserinfo(){
		uni.navigateTo({
			url: "/pages/userinfo/userinfo"
		})
	}
	function topasswordupdate(){
		uni.navigateTo({
			url: "/pages/passwordupdate/passwordupdate?id=" + item.value.id
		})
	}
	function toabout(){
		uni.navigateTo({
			url: "/pages/about/about"
		})
	}
	app.component({
		cardBody,
		guiBoxBanner,
		guiModal
	});
</script>

<style scoped>
	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}

	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}
</style>
